<template>
    <div class='header'>
        <div class="left">
            <img src="../assets/logo.png" alt="" class="logo">
            <p class="leftTitle">百利UI资源库 </p>
            <p class="leftDetail">设计轻松搞定!</p>
        </div>
        <div class="right">            
            <img src="../assets/mine.png" alt="" class="rightHeaderImage">
            <!-- <img src="src/assets/mine.png" alt="" class="rightHeaderImage"> -->
            <img src="../assets/mine.png" alt="" class="rightAlertImage">
        </div>
    </div>
</template>
<script>
export default {

}
</script>
<style lang="scss" scoped>
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 95px;
    width: 100vw; /* 容器宽度占满父容器 */
    background: #FFFFFF;
    box-shadow: 0px 3px 12px 0px rgba(183, 183, 183, 0.09);
    border: 1px solid #F0F0F0;

    .left {
        // logo
        display: flex;
        flex-direction: row;
        // flex-wrap: wrap; ///可换行
        align-items: center;
        flex-shrink: 1;
        background-color: #0700d7;
// 
        .logo {
            width: 59px;
            height: 39px;
        }

        .leftTitle {
            height: 32px;
            font-family: Source Han Serif SC;
            font-weight: 800;
            font-size: 33px;
            color: #D7000F;
        }

        .leftDetail {
            height: 34px;
            font-family: SUXINSHI;
            font-weight: 400;
            font-size: 28px;
            color: #000000;
            opacity: 0.8;
        }
    }

    .right {
        display: flex;
        flex-direction: row;
        background-color: #D7000F;
        margin-left: auto; /* 将右边的图片推向右边 */
        // flex: auto;
        // flex-shrink: 0;
        // flex-shrink: 1;

        .rightHeaderImage {
            width: 48px;
            height: 48px;
        }

        .rightAlertImage {
            width: 34px;
            height: 36px;
        }
    }

}
</style>